<template>
	<div class="">
		<div class="qantityStatistics">
			<img @click="subBtn" class="sub-img" :class="num === 0 ? 'disabled' : ''" src="@/static/17.png" mode="" />
			<text class="num">{{ num }}</text>
			<img @click="addBtn" class="add-img" :class="addDis ? 'disabled' : ''" src="@/static/18.png" mode="" />
		</div>
		isChange:::{{isChange}}
	</div>
</template>

<script>
export default {
	name: "quantityStatistics",
	data() {
		return {
			num: 0
		}
	},
	props: {
		row: {
			type: Object,
			default: () => { }
		},
		canMintHorse: {
			type: Number,
			default: 10
		},
		canMintBoy: {
			type: Number,
			default: 8
		},
		isChange: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		addDis() {
			return (this.row.btnType === 1 && (this.num === 8 || this.num === this.canMintBoy)) || (this.row.btnType === 3 && (this.num === 10 || this.num === this.canMintHorse))
		}
	},
	watch: {
    isChange(newName, oldName) {
		console.log('newName')
		console.log(newName)
    	 this.num = 0
    }
  },
	methods: {
		subBtn() {
			if (this.num != 0) {
				this.num--
			}
			this.$emit('subBtn', this.num)
		},
		addBtn() {
			if (this.addDis) return
			this.num++
			this.$emit('addBtn', this.num)
		}
	}
}
</script>

<style lang="scss">
.qantityStatistics {
	width: 130px;
	height: 18px;
	border: 2px solid #25A9A6;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px;

	.num {
		width: 70px;
		text-align: center;
		overflow-y: scroll;
	}

	.add-img {
		width: 25px;
		height: 25px;
	}

	.sub-img {
		width: 25px;
		height: 25px;
	}

	.disabled {
		opacity: 0.4;
	}
}
</style>